<template>
  <div
    class="flex flex-col h-[262px] relative after:bg-box01Bg after:h-[174px] before:bg-[length:100%_100%] after:bg-[length:100%_100%] before:absolute after:bg-no-repeat after:absolute after:bottom-0 after:left-0 after:right-0 before:bg-boxHeaderBg before:bg-no-repeat before:top-0 before:left-0 before:right-0 before:h-[36px]"
  >
    <!-- 标题区 -->
    <BoxHeader :title="title"></BoxHeader>
    <div class="flex flex-col z-10">
      <!-- 值区 -->
      <div class="flex flex-row pl-[13.5px] justify-center">
        <!-- 主值区 -->
        <div class="flex flex-row">
          <div
            v-if="mainValInfo.prefix"
            class="flex-shrink-0 color-blue text-[20px] font-family-PingFangSC font-[500] leading-[50]"
          >
            {{ mainValInfo.prefix }}
          </div>
          <div
            class="text-[60px] font-[500] font-family-DINPro not-italic leading-[100px] h-[80px]"
            :style="{ color: mainValInfo.valueColor }"
          >
            {{ mainValInfo.value }}
          </div>
          <div class="color-blue font-[500] font-family-DINPro text-[24px] flex items-end pb-[6px]">
            {{ mainValInfo.unit }}
          </div>
        </div>
        <!-- 子值区 -->
        <div
          v-if="hasSubValArr"
          class="flex-1 w-0 flex flex-col justify-end ml-[11px] mr-[8px]"
          :class="`${hasMutilSubVal ? 'pb-[10px]' : 'pb-[6px]'}`"
        >
          <div class="flex flex-col">
            <div v-for="(subValInfo, idx) in subValInfoArr" :key="idx" class="flex flex-row">
              <div
                v-if="subValInfo.prefix"
                class="font-family-MicrosoftYaHei text-[16px] color-blue font-bold leading-[22px]"
              >
                {{ subValInfo.prefix }}
              </div>
              <div
                class="color-whilte font-[500] font-family-DINPro ml-auto"
                :class="`${hasMutilSubVal ? 'text-[18px] leading-[18px]' : 'text-[24px] leading-[27px]'}`"
              >
                {{ subValInfo.value }}{{ subValInfo.unit }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 明细区 -->
      <div class="flex flex-col px-[16px] box-border">
        <div
          class="flex flex-row justify-between mb-[6px]"
          v-for="(detail, idx) in detailArr"
          :key="idx"
        >
          <div class="color-blue font-family-MicrosoftYaHei text-[16px] leading-[20px] font-bold">
            {{ detail.title }}
          </div>
          <div
            :style="{ color: detail.valueColor }"
            class="text-[18px] font-[500] leading-[20px] font-family-DINPro pt-[2px]"
          >
            {{ detail.value }}
            {{ detail.unit }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { DetailItem, MainValInfo, ValInfo } from './typing'

const props = defineProps<{
  title: string
  mainValInfo: MainValInfo
  subValInfoArr?: ValInfo[]
  detailArr: DetailItem[]
}>()

const { subValInfoArr } = toRefs(props)

const hasSubValArr = computed(() => {
  return subValInfoArr.value && subValInfoArr.value.length > 0
})
const hasMutilSubVal = computed(() => {
  return subValInfoArr.value && subValInfoArr.value.length > 1
})
</script>

<style scoped lang="less">
.color-blue {
  color: #90b6d8;
}
.color-whilte {
  color: #f0f9ff;
}
</style>
